﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div style="overflow: hidden">
    <div class="login-form">
        <h1>统一认证平台</h1>
        <form action="/login" method="post">
            <div class="login-item">
                <span class="login-item-name">用户名: </span>
                <input type="text" name="username"/>
            </div>
            <div class="login-item">
                <span class="login-item-name">密码: </span>
                <input type="text" name="password"/>
            </div>
            <div class="login-item submit">
                <input type="submit" value="登录"/>
            </div>
        </form>

    </div>
</div>
</body>
<style>
    * {
        box-sizing: border-box;
    }
    body {
        overflow: hidden;
        margin: 0;
    }
    h1 {
        margin-left: 25px;
    }
    .login-form {
        width: 600px;
        margin: 120px auto;
        text-align: center;
        border: 1px solid #eee;
        border-radius: 5px;
        box-shadow: 2px 9px 6px 0px #ddd;
    }

    .login-form form {
        width: 60%;
        margin: 20px auto;
        padding: 10px 0 50px;
    }

    .login-item {
        display: flex;
        margin-bottom: 20px;
        height: 26px;
        line-height: 32px;
    }
    .login-item .login-item-name {
        width: 100px;
        text-align: right;
        padding-right: 15px;
    }

    .login-item input {
        flex: 1;
        outline: none;
        border: 1px solid #ddd;
        height: 32px;
        font-size: 18px;
        font-weight: lighter;
        padding-left: 10px;
        border-radius: 5px;
    }

    .login-item.submit {
        padding-left: 100px;
    }

    .login-item.submit input[type=submit]{
        border: none;
        background-color: #86bdcf;
        letter-spacing: 10px;
        color: #ffffff;
        transition: all .2s;
    }

    .login-item.submit input[type=submit]:hover {
        background-color: #6da0b2;
    }

</style>
</html>
